import React from 'react'
import './list.css'
import Header from '@common/header'
import { Table, Pagination, Button } from 'antd'
import { Link } from 'react-router-dom'
import { getMessageList } from '@api/message'
import { getDate, getTime } from '@utility/filter'

const columns = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    fixed: 'left',
    render: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '消息列表',
    width: 350,
    dataIndex: 'content',
    align: 'left',
    fixed: 'left',
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'isread',
    align: 'center',
    width: 80,
    render: (status) => (
      <div className={ `_message-list-status ${ status === 1 ? 'readed' : 'unread' }` }>{ status === 1 ? '已读' : '未读' }</div>
    )
  },
  {
    title: '发布时间',
    dataIndex: 'createdate',
    width: 200,
    align: 'center',
    render: (date) => getDate(date) + ' ' + getTime(date)
  },
  {
    title: '操作',
    fixed: 'right',
    width: 150,
    align: 'center',
    render: (text, record) => (
      <>
        <Link to={ '/message/detail?id=' + record.id } target="_blank">
          <Button type="link">查看原文</Button>
        </Link>
      </>
    ),
  },
]

class List extends React.Component {

  state = {
    loaded: false, // 是否已加载完毕
    headerTitle: '消息通知列表', // 页面标题
    headerOptions: [
      { name: '首页', path: '/home' },
      { name: '消息通知列表' },
    ], // 页面栈
    listData: [], // 列表数据
    total: null, // 数据总数
    pageSizeOptions: [1, 2, 5, 7], // 指定每页可以显示多少条
    defaultCurrent: 1, // 默认的当前页数	
    defaultPageSize: 1, // 默认的每页条数
  }

  componentDidMount() {
    this.getMessageList()
  }

  // 获取消息列表
  getMessageList(page, rows) {
    let { defaultCurrent, defaultPageSize } = this.state
    getMessageList({
      page: page || defaultCurrent,
      rows: rows || defaultPageSize
    }).then(res => {
      console.log(res)
      let { data, total } = res
      data = data.map((item, index) => {
        item.key = index
        return item
      })
      this.setState({
        loaded: true,
        listData: data,
        total
      })
    })
  }

  // 页码改变的回调，参数是改变后的页码及每页条数
  onChange = (page, rows) => {
    this.getMessageList(page, rows)
  }

  render() {
    let { headerTitle, headerOptions, loaded, listData, total, pageSizeOptions, defaultCurrent, defaultPageSize } = this.state
    return loaded ? (
      <div className="_message-list">
        <Header title={ headerTitle } options={ headerOptions }></Header>
        <div className="list-container">
          <div className="list-box">
            <div className="table">
              <Table columns={ columns } dataSource={ listData } pagination={ false } />
            </div>
            <div className="pagination">
              <div className="pagination-toast">总共 { total } 条</div>
              <Pagination
                showSizeChanger
                defaultCurrent={ defaultCurrent }
                pageSizeOptions={ pageSizeOptions }
                defaultPageSize={ defaultPageSize }
                total={ total }
                onChange={ this.onChange }
              >
              </Pagination>
            </div>
          </div>
        </div>
      </div>
    ) : null
  }

}

export default List